<template>
  <div id="chart-pie" ref="chartPie" />
</template>

<script>
import * as echarts from "echarts/core";
import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout]);
let myChart;

export default {
  data() {
    return {};
  },
  props: {
    chartData: {
      type: Array,
      default: () => [],
    },
    formatterUnit: {
      type: String,
      default: "万亩次",
    },
    seriesRadius: {
      type: Array,
      default: () => ["45%", "70%"],
    },
    seriesCenter: {
      type: Array,
      default: () => ["50%", "50%"],
    },

    legend: {
      type: Object,
      default: () => {
        return {};
      },
    },
    normalShow: {
      type: Boolean,
      default: false,
    },
    legendShow: {
      type: Boolean,
      default: true,
    },
    pieColor: {
      type: Array,
      default: () => {
        return [
          "#3c98ff",
          "#ff9100",
          "#8e62ff",
          "#15d6ff",
          "#ff773b",
          "#3a80ff",
          "#e11cf3",
          "#00db7c",
          "#007eff",
          "#ff4b4b",
          "#ffd74b",
        ];
      },
    },
  },
  watch: {
    chartData: {
      handler(v) {
        this.init();
      },
      deep: true,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const chartDom = this.$refs.chartPie;
      // if (myChart != null && myChart != "" && myChart != undefined) myChart.dispose();
      myChart = echarts.init(chartDom);
      myChart.setOption({
        tooltip: {
          textStyle: {
            //   fontSize: 18, //字体大小
            color: "#ffffff", //字体颜色
          },

          formatter: "{b} : {c} ({d}%)",
          borderColor: "#3C98FF",
          borderWidth: 1,
          backgroundColor: "rgba(60, 152, 255, 0.8)", //通过设置rgba调节背景颜色与透明度
        },
        color: this.pieColor,
        legend: {
          orient: "vertical",
          top: "center",
          right: this.legend.right || "35%",
          itemWidth: 10,
          itemHeight: 10,
          icon: "rect",
          show: this.legendShow,
          textStyle: {
            //   fontSize: 18, //字体大小
            color: "#ffffff", //字体颜色
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: this.seriesRadius,
            center: this.seriesCenter,
            minAngle: 35, //最小角度
            startAngle: 30, //起始角度
            // avoidLabelOverlap: false,
            itemStyle: {
              // borderColor: "#fff",
              // borderWidth: 1,
            },
            label: {
              // formatter: "{name|b} {d}% \n\n {per| c} 万亩 ",
              // formatter: "{b} {per|{c} %\n\n}{d} 万亩",
              // rich: {
              //   /* value: {
              //     fontSize: 10,
              //     color: "#999",
              //   }, */
              //   per: {
              //     fontSize: 14,
              //     color: "#ff9100",
              //   },
              // },
              normal: {
                show: this.normalShow,
                // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                formatter: `{a|{b}} {per|{d} %\n\n{c} ${this.formatterUnit}}`,
                rich: {
                  a: {
                    color: "#fff",
                    fontSize: 14,
                    lineHeight: 20,
                    align: "center",
                    fontWeight: 600,
                  },
                  per: {
                    color: "#ff9100",
                    align: "center",
                    fontSize: 14,
                    fontWeight: 600,
                  },
                },
              },
            },
            emphasis: {
              label: {
                // show: false,
                // fontSize: "40",
                // fontWeight: "bold",
              },
            },
            labelLine: {
              // show: false,
              length: 50,
              length2: 10,
              maxSurfaceAngle: 80,
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < myChart.getWidth() / 2;
              const points = params.labelLinePoints;
              // Update the end point.
              if (points) {
                points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
                return {
                  labelLinePoints: points,
                };
              }
            },
            data: this.chartData,
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
#chart-pie {
  height: 140px;
  width: 100%;
}
</style>
